<%--
  Created by IntelliJ IDEA.
  User: zhifu
  Date: 2015/3/20
  Time: 13:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
  <script type="text/javascript">
    function showTips(event,id){
      var e = document.getElementById(id);
      e.style.visibility="visible";
      e.style.left=event.clientX+5+"px";
      e.style.top=event.clientY+5+"px";
    }

    function hidTips(event,id){
      var e = document.getElementById(id);
      e.style.visibility="hidden";
    }
  </script>
</head>
<body>
<table width="600" height="200" border="1" cellpadding="4" cellspacing="5">
  <tr>
    <td width="200" height="200">
    <div style="height: 200px; width:200px; background-image: url(/image/a.jpg)" onmouseover="showTips(event,'div1')" onmouseout="hidTips(event,'div1')" ></div>
    <div id="div1" style="position: absolute; background-color: blue; padding: 7px; visibility: hidden">
      <span style="font-weight: bold">小白兔相册</span>
    </div>
  </td>

    <td width="200" height="200">
      <div style="height: 190px; width:190px; background-image: url(/image/d.jpg)" onmouseover="showTips(event,'div2')" onmouseout="hidTips(event,'div2')" ></div>
      <div id="div2" style="position: absolute; background-color: blue; padding: 7px; visibility: hidden">
        <span style="font-weight: bold">木头君相册</span>
      </div>
    </td>
  </tr>
</table>
</body>
</html>
